<template>
    <footer class="m_footer container-fluid text-center no-gutters row">
        <div class="container">
            <div class="row">
                <div class="col-8 text-left font_size_18 m_footer_text_box">
                    <p>
                        <span>快速链接</span>
                        <a href="javascript:void(0);" @click="AddFavorite({title:'项目首页', url:'http://www.XXX.com'})">收藏本站</a>
                        <a href="javascript:void(0);" @click="setHome()">设为首页</a>
                        <router-link :to="{name: 'backStage'}">后台系统</router-link>
                    </p>

                    <p>
                        <span>关于项目</span>
                        <a href="statement" target="_blank">网站声明</a>
                        <a href="help" target="_blank">帮助文档</a>
                        <a href="aboutus">关于我们</a>
                        <a target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=_cvPz8zNzsHNy8_5iIjXmpaU">E-mail 我们</a>
                    </p>
                </div>

                <div class="col-4 text-right">
                    <a href="index" title="网站名">
                        <img alt="项目Logo" :src="projectIcon" height="50px">
                    </a>

                    <div>
                        <a href="/index" class="web_authentication" v-bind:title="projectDomain">
                            “{{ projectName }}"团队
                        </a>
                    </div>
                </div>
            </div>

            <div class="text-center" id="projectRecord">
                <p>
                    版权归属 {{ projectCreateYear }} {{ projectName }}团队 版权所有
                </p>

                <a v-bind:href="projectRecordLink">
                    {{ projectRecord }}
                </a>
            </div>
        </div>
    </footer>
</template>

<script>
    export default {
        name: "PageFooter",
        data() {
            return {
                projectIcon: require('@/assets/images/Logo.png'),
            }
        },
        props: {
            projectCreateYear: {
                type: Number,
                default: function () {
                    let date = new Date()
                    return date.getFullYear()
                }
            },
            projectName: {
                type: String,
                default: '友铭实战小组'
            },
            projectDomain: {
                type: String,
                default: 'project-name.com'
            },
            projectRecord: {
                type: String,
                default: '赣ICP备XXXXXXX号'
            },
            projectRecordLink: {
                type: String,
                default: 'http://beian.miit.gov.cn/'
            }
        },
        methods: {
            // 快速收藏网站网址
            AddFavorite({title = document.title, url = window.location.href} = {}){
                try{
                    window.external.addFavorite(url, title)
                }
                catch(e){
                    try{
                        window.sidebar.addPanel(title, url, "")
                    }
                    catch(e){
                        alert("抱歉，您所使用的浏览器无法完成此操作。\n\n请使用快捷键Ctrl+D进行添加！")
                    }
                }
            },
            // 将当前网页设为首页</a>
            setHome(){
                try{
                    this.style.behavior='url(#default#homepage)'
                    this.setHomePage(window.location.href)
                }
                catch(e){
                    alert("抱歉，您所使用的浏览器无法完成此操作。\n\n请在浏览器设置中将该网址设置为首页：\n" + window.location.href)
                }
            }

        }
    }
</script>

<style scoped>
    .m_footer{
        color: #F5F5F5;
        background: #BDBDBD;
        padding-top: 10px;
        height: 175px;
    }
    .m_footer a, p, span, img{
        transition: 0.5s;
    }
    .m_footer a{
        font-weight: bold;
        color: #616161;
        transition: 0.5s;
        cursor: pointer;
    }
    .m_footer a:hover{
        color: #212121;
    }
    .m_footer span{
        font-weight: bold;
        margin-right: 20px;
    }
    .m_footer p{
        margin: 10px 0;
        cursor: default;
        transition: 0.5s;
    }
    .m_footer h4{
        cursor: default;
    }

    .m_footer_text_box a{
        text-decoration: none;
        font-weight: bold;
        margin-right: 10px;
    }

    @media screen and (max-width: 768px){
        .m_footer a, p, span, img{
            font-size: 12px;
        }
    }

    .web_authentication{
        text-decoration: none;
        color: #F5F5F5;
        transition: all 0.3s linear;
    }
    .web_authentication:hover{
        color: chartreuse;
    }

    #projectRecord{
        display: block;
        margin-bottom: 15px;
    }
    #projectRecord p{
        color: #616161;
        transition: 0.4s;
    }
    #projectRecord p:hover{
        color: #212121;
    }
</style>

